{% extends "./teacher_base.html" %}

{% block page_title %}评分标准{% endblock %}

{% block main_content %}
<div class="container mt-4">
    <h2 class="text-center fw-bold">{{ title }}</h2>
    <div class="card mt-3">
        <div class="card-body">
            <table id="gradingTable" class="table table-striped">
                <thead>
                    <tr>
                        <th style="width: 7%;">序号</th>
                        <th style="width: 15%;">评价点</th>
                        <th style="width: 7%;">分值</th>
                        <th style="width: 60%;">评价描述</th>
                        <th style="width: 10%;">操作</th>  <!-- 新增操作列 -->
                    </tr>
                </thead>
                <tbody>
                    {% for item in grading_items %}
                    <tr data-id="{{ item.id }}">  <!-- 添加data-id存储ID -->
                        <td>{{ item.id }}</td>
                        <td class="item-name">{{ item.item_name }}</td>
                        <td class="max-score">{{ item.max_score }}</td>
                        <td class="description">{{ item.description }}</td>
                        <td>
                            <button class="btn btn-sm btn-primary edit-btn">编辑</button>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="5" class="text-center">暂无评分标准数据</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 编辑模态框 -->
<div class="modal fade" id="editModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑评分项</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editForm">
                    <input type="hidden" id="itemId">
                    <div class="mb-3">
                        <label for="itemName" class="form-label">评价点</label>
                        <input type="text" class="form-control" id="itemName" required>
                    </div>
                    <div class="mb-3">
                        <label for="maxScore" class="form-label">最高分值</label>
                        <input type="number" class="form-control" id="maxScore" min="1" required>
                    </div>
                    <div class="mb-3">
                        <label for="description" class="form-label">评价描述</label>
                        <textarea class="form-control" id="description" rows="3" required></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveBtn">保存</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- 引入jQuery和Bootstrap模态框 -->


<script>
$(document).ready(function() {
    // 编辑按钮点击事件
    $('.edit-btn').click(function() {
        var row = $(this).closest('tr');
        var itemId = row.data('id');
        
        // 填充模态框数据
        $('#itemId').val(itemId);
        $('#itemName').val(row.find('.item-name').text());
        $('#maxScore').val(row.find('.max-score').text());
        $('#description').val(row.find('.description').text());
        
        // 显示模态框
        var modal = new bootstrap.Modal(document.getElementById('editModal'));
        modal.show();
    });

    // 保存按钮点击事件
    $('#saveBtn').click(function() {
        // 获取表单数据
        var itemId = $('#itemId').val();
        var itemName = $('#itemName').val().trim();
        var maxScore = $('#maxScore').val().trim();
        var description = $('#description').val().trim();
        
        // 验证数据
        if (!itemName) {
            alert('评价点不能为空');
            return;
        }
        if (!maxScore || isNaN(maxScore) || maxScore <= 0) {
            alert('最高分值必须是正整数');
            return;
        }
        if (!description) {
            alert('评价描述不能为空');
            return;
        }
        
        // 发送AJAX请求保存数据
        $.ajax({
            url: "{% url 'update_grading_item' %}",
            type: 'POST',
            data: {
                'id': itemId,
                'item_name': itemName,
                'max_score': maxScore,
                'description': description,
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            dataType: 'json',
            success: function(response) {
                if (response.status === 'success') {
                    // 更新表格数据
                    var row = $(`tr[data-id="${itemId}"]`);
                    row.find('.item-name').text(itemName);
                    row.find('.max-score').text(maxScore);
                    row.find('.description').text(description);
                    
                    // 关闭模态框
                    var modal = bootstrap.Modal.getInstance(document.getElementById('editModal'));
                    modal.hide();
                    
                    alert('保存成功');
                } else {
                    alert('保存失败: ' + response.message);
                }
            },
            error: function() {
                alert('网络错误，保存失败');
            }
        });
    });
});
</script>
{% endblock %}